<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('列表')"/>
    <script th:src="@{/static/admin/js/pdf.js}"></script>
    <script th:src="@{/static/admin/js/pdf.worker.js}"></script>
</head>
<style>
    .evidence {
        width: 100%;
        background: #fff;
    }

    .evidence_left {
        float: left;
        width: 59%;
    }

    .evidence_right {
        float: right;
        width: 40%;
    }

    .clear {
        clear: both
    }

    .title {
        padding: 10px;
        display: block;
        border-left: #36b368 solid 4px;
        color: #333;
        font-weight: bold;
        font-size: 14px;
        background: #f2f2f2;
    }

    #iconicResult {
        margin-left: 30px;
        margin-top: 5px;
    }

    #steptable {
        border: 1px solid;
    }

    th { /*为页面中所有的th标签添加样式*/
        border: black 1px solid; /*添加边框*/
    }

    td { /*为页面中所有的td标签添加样式*/
        border: black 1px solid; /*添加边框*/
    }

    .systemBtn {
        min-width: 80px;
        /*height: 80px;*/
        border-radius: 5px;
        display: inline-block;
        cursor: pointer;
        border: none;
        margin-right: 20px;
        margin-top: 10px;
        background: red;
        text-align: center;
        font-size: 14px;
        color: #fff;
        background: -webkit-linear-gradient(#51d4ad , #01a8de); /* Safari 5.1 - 6.0 */
        background: -o-linear-gradient(#51d4ad , #01a8de); /* Opera 11.1 - 12.0 */
        background: -moz-linear-gradient(#51d4ad , #01a8de); /* Firefox 3.6 - 15 */
        background: linear-gradient(#51d4ad , #01a8de); /* 标准的语法（必须放在最后） */
    }
    .systemBtn img{
        margin-top: 10px;
    }
    .systemBtn p{
        /*margin-top: 10px;*/
        /*padding-bottom:10px*/
        padding:10px;
    }
</style>
<body>
<div class="evidence">
    <div style="padding: 10px">
        <div class="evidence_left">
            <div style="position: relative">
                <label class="title">填报相关系统地址</label>
                <button style="position: absolute; top: 4px; right: 5px" type="button"
                        class="layui-btn layui-btn-sm layui-btn-normal" onclick="Closeiframe()">返回
                </button>
            </div>
            <div id="webdiv"></div>
        </div>
        <div class="evidence_right">
            <label class="title">操作步骤说明</label>
            <table class="layui-table">
                <thead>
                <tr>
                    <th width="18%">步骤序号</th>
                    <th width="82%">操作内容</th>
                </tr>
                </thead>
                <tbody id="steptable"></tbody>
            </table>
        </div>
        <div class="clear"></div>
    </div>
</div>


</body>
<th:block th:include="include :: footer"/>
<script th:inline="javascript" type="text/javascript">

    var infoTargetSteps = [[${infoTargetSteps}]];
    var infoWeburls = [[${infoWeburls}]];


    var webHtml = "";
    var stepHtml = "";

    for (var i = 0; i < infoWeburls.length; i++) {
        webHtml += '<div class="systemBtn" onclick="viewWeb(\'' + infoWeburls[i].url + '\')"><img src="../../static/admin/images/systemBtn.png" width="30" /><p>' + infoWeburls[i].name + '</p></div>';
        // webHtml += '<div class="systemBtn" onclick="viewWeb(\'' + infoWeburls[i].url + '\')">' + infoWeburls[i].name + '</div>';
    }
    var tbody = document.querySelector("tbody")
    for (var i = 0; i < infoTargetSteps.length; i++) {
        var tr = document.createElement("tr")
        tbody.appendChild(tr)
        var td1 = document.createElement("td")
        tr.appendChild(td1)
        td1.innerHTML = '第' + infoTargetSteps[i].ordernum + '步'
        var td2 = document.createElement("td")
        tr.appendChild(td2)
        td2.innerHTML = infoTargetSteps[i].content
    }

    $('#webdiv').html(webHtml);

    function viewWeb(e) {
        // console.log(e)
        // var viewhtml = '<iframe id="pdf" width="100%"></iframe>'
        // $('#webdiv').html(viewhtml);
        // $("#pdf").attr("height", 650);
        // $("#pdf").attr("src", e);

        // var index = layer.open({
        //     type: 2,
        //     title: "",
        //     shade: 0.1,
        //     // area: ['100%', '100%'],
        //     content: e
        // });
        // layer.full(index);

        window.open(e);

    }

    function Closeiframe() {
        $('#webdiv').html(webHtml);
        $('#pdf').hide();
    }
</script>
</html>